<template>
  <div class="my-card">
    <el-card class="account-card_item">
      <!-- <img class="country" :src="country_src" v-if="country_src"/> -->
      <div class="country">{{accountInfo.currency}}</div>
      <div class="money-item">
        <div class="key">帳戶金額</div>
        <div class="money">{{ accountInfo.account_balance }}</div>
      </div>
      <div class="money-item">
        <div class="key">凍結金額</div>
        <div class="money red">{{ accountInfo.freeze_balance }}</div>
      </div>
      <div class="money-item">
        <div class="key">風險保證金</div>
        <div class="money">{{ accountInfo.risk_insurance }}</div>
      </div>
      <div class="money-item">
        <div class="key">可用餘額</div>
        <div class="money green">{{ accountInfo.available_balance }}</div>
      </div>
    </el-card>
  </div>
</template>
<script setup>
import CHINA_IMG from "@/assets/image/china.png";
import USA_IMG from "@/assets/image/usa.png";
import EUP_IMG from "@/assets/image/eng.png";
import { computed } from "vue";

const props = defineProps({
  accountInfo: {
    type: Object,
    default: () => ({
      country: "china",
      account_balance: 1000000,
      freeze_balance: 1000000,
      risk_insurance: 1000000,
      available_balance: 1000000,
    }),
  },
});
const COUNTRY_MAP_IMAGE = {
  china: CHINA_IMG,
  usa: USA_IMG,
  eup: EUP_IMG,
};

const country_src = computed(() => {
  return COUNTRY_MAP_IMAGE[props.accountInfo.country];
});
</script>
<style scoped lang="scss">
.account-card_item {
  width: 443px;
  height: 371px;
  font-size: 20px;
  font-weight: bold;
}

.my-card {
  :deep(.account-card_item) {
    .el-card__body {
      width: 100%;
      height: 100%;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: 58px 70px 70px;
      grid-template-areas:
        "country country"
        "a b"
        "c d";
      padding-top: 31px;
      padding-left: 37px;
      row-gap: 50px;
    }
  }
}

.red {
  color: #ff6d62;
}

.green {
  color: #127c70;
}

.country {
  width: 58px;
  height: 58px;
  grid-area: country;
}

.money-item {
  line-height: 40px;
}
.money-item:nth-child(2) {
  grid-area: a;
}

.money-item:nth-child(3) {
  grid-area: b;
}

.money-item:nth-child(4) {
  grid-area: c;
}

.money-item:nth-child(5) {
  grid-area: d;
}
</style>
